<template>
  <div class="resume-form-container">
    <el-card class="form-card">
      <template #header>
        <div class="form-header">
          <h2>信息填写</h2>
          <el-button type="primary" @click="submitForm">提交</el-button>
        </div>
      </template>

      <el-steps :active="activeStep" finish-status="success" simple>
        <el-step title="基本信息" />
        <el-step title="工作经历" />
        <el-step title="获奖经历" />
        <el-step title="科研成果" />
      </el-steps>

      <div class="form-content">
        <BasicInfoForm
            v-show="activeStep === 0"
            v-model:form="formData.basicInfo"

        />

        <WorkExperienceForm
            v-show="activeStep === 1"
            v-model:experiences="formData.workExperiences"
        />

        <AwardsForm
            v-show="activeStep === 2"
            v-model:awards="formData.awards"
        />

        <ResearchAchievementsForm
            v-show="activeStep === 3"
            v-model:achievements="formData.researchAchievements"
        />
      </div>

      <div class="form-actions">
        <el-button v-if="activeStep > 0" @click="prevStep">上一步</el-button>
        <el-button
            v-if="activeStep < 3"
            type="primary"
            @click="nextStep"
            :disabled="!currentStepValid"
        >
          下一步
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import BasicInfoForm from './BasicInfoForm.vue'
import WorkExperienceForm from './WorkExperienceForm.vue'
import AwardsForm from './AwardsForm.vue'
import ResearchAchievementsForm from './ResearchAchievementsForm.vue'

// 表单数据结构
interface ResumeFormData {
  basicInfo: {
    name: string
    gender: string
    birthDate: string
    contact: string
    email: string
    education: string
    avatar?: string
  }
  workExperiences: {
    company: string
    position: string
    startDate: string
    endDate: string
    description: string
    certificate?: string
  }[]
  awards: {
    name: string
    issuingOrg: string
    date: string
    description: string
    certificate?: string
  }[]
  researchAchievements: {
    type: '专利' | 'SCI' | 'EI' | '其他'
    title: string
    publishDate: string
    description: string
    certificate?: string
  }[]
}

const activeStep = ref(0)
const currentStepValid = ref(true)
const formData = reactive<ResumeFormData>({
  basicInfo: {
    name: '',
    gender: '',
    birthDate: '',
    contact: '',
    email: '',
    education: ''
  },
  workExperiences: [],
  awards: [],
  researchAchievements: []
})

// 步骤导航
const nextStep = () => {
  if (activeStep.value < 3) {
    activeStep.value++
  }
}

const prevStep = () => {
  if (activeStep.value > 0) {
    activeStep.value--
  }
}

// 表单验证回调
const handleValidate = (isValid: boolean) => {
  currentStepValid.value = isValid
}

// 提交表单
const submitForm = () => {
  console.log('提交表单数据:', formData)
  // 这里添加API提交逻辑
  alert('简历提交成功!')
}
</script>

<style scoped>
.resume-form-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

.form-card {
  margin-bottom: 20px;
}

.form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-content {
  margin: 30px 0;
  min-height: 400px;
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}
</style>